<script setup>
import { useTheme } from '@/hooks/theme/theme.js'
import useSettingsStore from '@/store/modules/settings.js'
import { RouterView } from 'vue-router'

const { setTheme, toggleDarkMode } = useTheme()
const settingsStore = useSettingsStore()
watch(() => settingsStore.title, () => {
  const title = settingsStore.title
  document.title = title ? `${title} - ${import.meta.env.VITE_APP_TITLE}` : import.meta.env.VITE_APP_TITLE
}, {
  immediate: true,
})
const theme = {
  primary: '#3664D1',
  success: '#52c41a',
  warning: '#faad14',
  danger: '#ff4d4f',
  info: '#1677ff',
}

onMounted(() => {
  setTheme(theme)
})
</script>

<template>
  <el-config-provider
    :button="{
      autoInsertSpace: true,
    }"
  >
    <RouterView v-if="settingsStore.reloadFlag"/>
  </el-config-provider>
</template>

<style scoped>

</style>
